<script setup>
import InsertDialog from '@/components/InsertDialog/InsertDialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { nextTick, ref } from 'vue';
import cyber from '../../../lib/cybercloud';

const shadow = ref('never');
const insertDialogShow = ref(false);
const insertDialogConfig = ref({});
const insertDialog = ref(null);
const props = defineProps({
  title: {
    type: Object,
    default() {
      return {
      };
    },
  },
  enums: {
    type: Object,
    default() {
      return {};
    },
  },
  buttons: {
    type: Array,
    default() {
      return [];
    },
  },
  deleteParams: {
    type: Object,
    default() {
      return {
        objectId: '',
        params: {},
      };
    },
  },
});
const emit = defineEmits(['refreshList', 'returnDo']);
/**
 * 刷新列表
 */
function refreshList() {
  emit('refreshList');
}

/**
 * 返回父类处理事情
 * @param action
 */
function returnDo(action) {
  emit('returnDo', action);
}

/**
 * 通用删除，传入属性参数 deleteParams
 * @param deleteDialog
 */
function deleteBox(deleteDialog) {
  if (props.deleteParams.params.ids.length === 0) {
    ElMessage.warning('至少选中一个数据');
    return;
  }
  ElMessageBox.confirm(
    deleteDialog.content,
    deleteDialog.title,
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cyber.request({
      method: 'POST',
      url: '/api/app/corm/delete',
      data: props.deleteParams,
    })
      .then((response) => {
        if (response.success) {
          ElMessage.success('删除成功');
          refreshList();
        } else {
          ElMessage.error(response.message);
        }
      })
      .catch(() => ElMessage.error('操作失败'));
  })
    .catch(() => {
      ElMessage.info('取消删除');
    });
}

function buttonClick(action, index) {
  const button = props.buttons[index];
  if (action === 'insertDialog') {
    insertDialogConfig.value = button.dialogForm;
    insertDialogShow.value = true;
    nextTick(() => {
      insertDialog.value.openDialog();
    });
  } else if (action === 'deleteDialog') {
    deleteBox(button.deleteDialog);
  } else if (action === 'returnDo') {
    returnDo(button.returnDo.action);
  } else if (action === 'refreshList') {
    refreshList();
  }
}
/**
 * 插入数据框关闭时
 */
function insertDialogClose() {
  insertDialogShow.value = false;
}
/**
 * 插入数据成功时
 */
function insertDialogSubmitSuccess() {
  refreshList();
}

</script>
<template>
  <div class="headerClass">
    <el-card :shadow="shadow">
      <div class="headerDiv">
        <div class="headerTitleDiv">
          <div class="headerTitleIconClass">
            <i :class="title.titleIcon"></i>
          </div>
          <div class="headerTitleName">{{ title.name }}</div>
        </div>
        <div class="headerButtonDiv">
          <C-Button @click="buttonClick(button.action,index)"
                    v-for="(button,index) in buttons" :key="index"
                    :icon="button.icon"
                    :type="button.type">
            <div v-if="!button.icon" class="headerButtonContent">{{ button.name }}</div>
            <div v-else class="headerButtonContent">
              <component :is="button.name" class="headerButtonIcon"/>
            </div>
          </C-Button>
        </div>
      </div>
    </el-card>
  </div>
  <InsertDialog v-if="insertDialogShow"
                ref="insertDialog"
                :enums="enums"
                :dialogConfig="insertDialogConfig"
                @closeDialog='insertDialogClose'
                @submitSuccess='insertDialogSubmitSuccess'
  />
</template>
<style scoped lang="sass">
@import "Header"
</style>
